<template>
<div class="layout-main">
<pullRefresh class="layout-box" style=" padding-top:0.3rem;" v-model="isLoading" @refresh="onRefresh">
<div class="index">
<van-swipe @change="onChange" class="w index-bar" :duration="300"  :autoplay="5000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img class="w login-bar-img" v-lazy="image" />
  </van-swipe-item>
  <template #indicator>
    <div class="custom-indicator">
      <span v-for="(image, index) in images" :class="{'cur':index==current}" :key="index"></span>
    </div>
  </template>
</van-swipe>
<div class="index-btn w">
  <div class="index-btx index-btx-01 hover"><del></del>公众号</div>
  <div class="index-btx index-btx-02 hover"><del></del>小程序</div>
</div>  
<div class="index-tab">
  <div class="index-tbx index-tbx-01 hover"><del></del>基础</div>
  <div class="index-tbx index-tbx-02 hover"><del></del>项目实战</div>
  <div class="index-tbx index-tbx-03 hover"><del></del>商城</div>
  <div class="index-tbx index-tbx-04 hover"><del></del>教学</div>
</div>  
<div class="index-box w">
	<div class="index-time">{{nowData}}</div> 
	<template v-if = "isLoading">
		<div class="index-li" v-for="i in 2">
			<van-skeleton title :row="2" row-width="90%" style="margin-top:0.5rem"></van-skeleton>
		</div>	
	</template>
	<div class="index-li" v-for="item in list" :key="item.id">
		<div class="title ellipsis">{{item.title}}</div>
		<img class="pic" v-lazy="setImgUrl(item.titleImg)" />
		<div class="tips ellipsis-l2">{{item.introduct}}</div>
		<div class="info">
			<span><van-icon style=" font-size:0.24rem;" name="clock-o" />{{item.created | setTimeFormat}}</span>
			<span><van-icon name="eye-o" />{{item.clickNum}}</span>
			<span><van-icon name="good-job-o" />{{item.likeNum}}</span>
		</div>
	</div>
</div> 
</div>
</pullRefresh>
</div>
</template>
<script>
import pullRefresh from '@/components/pullRefresh.vue';
import {formatDate} from "@/filters";
import api from "@/global/api";
export default {
  components: {pullRefresh},
  data() {
    return {
      images:[],
      current: 0,
			isLoading:false,
			nowData:'',
			list:[]
    };
  },  
  mounted() {
		this.getDataPic();
		this.getList();
		this.setNow();
  },
	activated(){
	},
  methods: {
    getDataPic(){
      this.images = [
				'https://www.doapis.com/doapis//public/resources/1625043676791.jpg',
				'https://www.doapis.com/doapis//public/resources/1625042624564.jpg'	
      ]	
    },
		async getList(){
			let list = await this.$http.get(api.getContentList,{params:{page:1,pageSize:3}});
			this.list = list.data.data;
		},
		setNow(){
			let _arr = formatDate('','1');
			this.nowData = `${_arr[1]}月${_arr[2]}日 ${_arr[3]}`
		},
    onChange(index) {
      this.current = index;
    }, 
    goToActive(_path){
      this.$router.push({path: _path}); 
    },

  	onRefresh() {
			
      setTimeout(() => {
				this.isLoading = false;
      }, 800);
    },
		setImgUrl(val){
			return api.cosHttp+val;
		}	   
  },
	filters: {
		setTimeFormat(val){
			var paddingStr = function (_str) {
				return _str.length == 1 ? "0" + _str : _str
			}
			var _curDate = new Date(val);	
			var _YY = _curDate.getFullYear();
			var _MM = paddingStr(_curDate.getMonth() + 1 + '');
			var _DD = paddingStr(_curDate.getDate() + '');
			return `${_YY}-${_MM}-${_DD}`					
		}
	} 
}
</script>
<style scoped>
.index{ overflow:hidden; width:7.5rem;}
.index-bar{ height: 3.5rem; position:relative; overflow:hidden; }
.login-bar-img{ height:3rem; display:block; border-radius:2px;}
.custom-indicator{ position: absolute; width: 100%; bottom:-0.5rem; height: 1rem; text-align: center;}
.custom-indicator span{ transition:all ease 0.2s; border-radius:0.06rem; margin: 0 0.05rem; display: inline-block; width: 0.12rem; height: 0.12rem; background: #D4D8DA;}
.custom-indicator span.cur{ background: #1AA5FE; width: 0.35rem;}

.index-btn{ height: 1.4rem; font-size:0.36rem; display: flex; justify-content:space-between; margin-bottom: 0.36rem;}
.index-btx{ width: 3.26rem; border-radius: 0.12rem; line-height: 1.4rem; color: #3A3C3D;}
.index-btx del{ width: 0.9rem; height: 0.8rem; margin:0.3rem 0.15rem 0 0.3rem; float: left; background: url(../../assets/index-bg.png) no-repeat; background-size:0.9rem 5.2rem;}
.index-btx-01{background: #DAF1FF;}
.index-btx-01 del{ background-position:0 0;}
.index-btx-02{background: #FFF0EC;}
.index-btx-02 del{ background-position:0 -0.8rem;}

.index-tab{ height: 1.5rem; display: flex;  margin-bottom: 0.25rem;}
.index-tbx{ width: 25%; font-size:0.28rem; text-align: center; color: #606365;}
.index-tbx del{ display: block; width: 0.9rem; height: 0.9rem; margin:0 auto 0.1rem;background: url(../../assets/index-bg.png) no-repeat; background-size:0.9rem 5.2rem;  }
.index-tbx-01 del{ background-position:0 -1.6rem;}
.index-tbx-02 del{ background-position:0 -2.5rem;}
.index-tbx-03 del{ background-position:0 -3.4rem;}
.index-tbx-04 del{ background-position:0 -4.3rem;}

.res-tit{font-size:0.36rem; color: #3A3C3D; height: 1rem; line-height: 1rem;}
.res-tit del{ margin:0.3rem 0.15rem 0 0; float: left; width: 0.06rem; height: 0.35rem; background:#1AA5FE; border-radius: 0.15rem; }
.res-tit .more{ float: right; color:#999;  font-size: 0.28rem; padding-right:0.3rem; background: url(../../assets/go-more.png) no-repeat right 0.32rem; background-size:0.28rem 0.3rem;}

.index-time{ text-align:center; color: #999999; padding-bottom: 0.4rem; font-size:0.28rem}
.index-li{ background: #FFFFFF; margin-bottom: 0.25rem; min-height: 2.8rem; width: 100%;  box-shadow: 0 4px 10px 0 rgba(56,58,61,0.10);border-radius:0.12rem; overflow: hidden;}
.index-li .title{ font-size:0.3rem; margin:0.24rem; font-weight:bold; color:#606365;}
.index-li .pic{ float:left; width:2.4rem; height:1.6rem; border-radius:0.06rem; margin:0 0.2rem 0 0.24rem;}
.index-li .tips{font-size:0.28rem; line-height:1.7; color: #999;}
.index-li .info{ height:0.5rem; padding-top:0.3rem; color:#999; font-size:0.24rem;}
.index-li .info span{ margin-right:0.4rem;}
.index-li .info i{ vertical-align:middle;  margin-right:0.08rem;}
</style>